<template>
    <div class="r_main">
        <div class="tabIn">
            <div class="tab">
                {{ tuanid ? '编辑团购' : '添加团购' }}
            </div>
            <div v-if="tuanid" class="btn2" @click="goPage">
                添加团购
            </div>
        </div>
        <div class="form_con">
            <div class="outer">
                <div class="basic">
                    <div class="selet">
                        <span>选择专栏：</span>
                        <div>
                            <el-select v-model="form.col_id" @change="getPrice" placeholder="请选择专栏">
                                <el-option v-for="item in cols" :label="item.title" :value="item.id" :key="item.id" />
                                <el-option disabled class="load-more" v-if="showMore1">
                                    <span @click="loadc">加载更多...</span>
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div>
                        <span>专栏原价：</span>
                        <span>{{ price }}元</span>
                    </div>

                    <div class="ipt">
                        <span>团购价格：</span>
                        <div>
                            <input type="text" v-model="form.price">
                            <span>（团购价格必须小于专栏原价）</span>
                        </div>
                    </div>
                    <div class="ipt">
                        <span>成团人数：</span>
                        <div>
                            <input type="number" v-model="form.nums">
                            <span>（达到成团人数活动才会生效）</span>
                        </div>
                    </div>
                    <div>
                        <span>开始时间：</span>
                        <div>
                            <el-date-picker v-if="!$store.getters.isMobile" prefix-icon="" value-format="yyyy-MM-dd"
                                v-model="form.start_time" type="date" placeholder="选择日期">
                            </el-date-picker>
                            <input v-else type="date" v-model="form.start_time" placeholder="选择日期">
                        </div>
                    </div>
                    <div>
                        <span>结束时间：</span>
                        <div>
                            <el-date-picker v-if="!$store.getters.isMobile" prefix-icon="" value-format="yyyy-MM-dd"
                                v-model="form.end_time" type="date" placeholder="选择日期">
                            </el-date-picker>
                            <input v-else type="date" v-model="form.end_time" placeholder="选择日期">
                        </div>
                    </div>
                </div>
                <div class="btn">
                    <el-button v-if="!id" round @click="onsubmit()">添加团购活动</el-button>
                    <el-button v-else round @click="onsubmit()">修改团购活动</el-button>
                </div>
            </div>
        </div>
    </div>

</template>
<script>
export default {
    data() {
        return {

            form: { col_id: '', price: '', start_time: '', end_time: '', nums: '' },
            cols: [],
            price: 0,

            totalPagec: 1,
            pageNumc: 1,
            loadingc: false,
            showMore1: false
        }
    },
    computed: {
        path() {
            return this.$route.path
        },
    },
    mounted() {
        this.getCols()

        window.addEventListener('scroll', this.handleScroll); // 监听滚动事件
        let id = this.$route.query.id
        if (id) {

            this.id = id
            this.getInfo()
        }
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.handleScroll); // 移除监听
    },

    methods: {

        loadc() {
            var page = this.pageNumc
            //如果请求未结束就返回不连续请求
            if (this.loadingc) {
                return
            }
            //数据请求完成无更多数据时
            if (page >= this.totalPagec) {
                return false;
            }
            page = parseInt(page) + 1
            this.pageNumc = page
            this.getCols()
        },

        getPrice(id) {
            let list = this.cols
            list.forEach(i => {
                if (id == i.id) {
                    this.price = i.price
                }
            })
        },


        getInfo() {
            this.$api.getGroup(
                { id: this.id }
            ).then(res => {
                if (res.data.code == 1) {
                    this.form = res.data.data
                    this.form.id = this.id
                    this.getPrice(res.data.data.col_id)
                }
            })
        },


        // 绑定专栏列表
        getCols() {
            this.loadingc = true

            let params = {
                page: this.pageNumc,
                is_free: 1,
            }
            this.$api.getCols(params).then(res => {
                if (res.data.code == 1) {
                    let response = res.data.data
                    this.totalPagec = response.last_page
                    if (this.totalPagec <= this.pageNumc) {
                        this.showMore1 = false
                    } else {
                        this.showMore1 = true
                    }
                    this.cols = this.cols.concat(response.data)
                    this.loadingc = false
                }
            })
        },


        // 绑定专栏列表
        // getCols() {
        //     this.$api.getCols(
        //         { is_free: 1 }
        //     ).then(res => {
        //         if (res.data.code == 1) {
        //             this.cols = res.data.data
        //         }
        //     })
        // },

        confirm(row) {
            console.log(row);

        },
        goPage() {
            this.$router.push('/promotion/groupBuyUpdate')
        },
        getTabtype(t) {
            this.curType = t
        },
        load() {
            console.log("处理触底");

        },
        onsubmit() {
            console.log(this.form);
            let params = this.form
            this.$api.applyGroup(params).then(res => {
                if (res.data.code == 1) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    })
                    this.$router.back()
                }
            })
        },
        handleScroll() {
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            const windowHeight = window.innerHeight;
            const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            // 判断是否滚动到底部
            if (scrollTop + windowHeight >= scrollHeight - 20) {
                this.load()
            }
        },
    }
}
</script>
<style lang="scss" scoped>
.r_main {
    width: 100%;

    .tabIn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 23px;
        background-color: #E5E5E5;
        position: sticky;
        top: 99px;
        z-index: 99;
        height: 60px;

        .btn2 {
            cursor: pointer;
            font-weight: 400;
            font-size: 14px;
            color: #1068E7;
            background: #FFFFFF;
            border-radius: 4px;
            border: 1px solid #1068E7;
            padding: 8px 10px;
        }

        // border-top: 0.05rem solid #E8E8E8;
        .tab {
            font-weight: bold;
            font-size: 24px;
            color: #1068E7;
        }

    }

    .form_con {
        min-height: 500px;
        // overflow-y: auto;
    }
}

.outer {
    margin-top: 30px;
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    flex-direction: column;
    justify-content: center;

    .basic {
        margin-top: 65px;
        display: flex;
        flex-direction: column;

        >div {
            display: flex;
            align-items: center;
            font-weight: 400;
            font-size: 18px;
            color: #333333;
            margin-bottom: 29px;

            >span:first-child {
                display: inline-block;
                width: 120px;
                text-align: right;
            }
        }

        .selet {
            >div {
                >span {
                    color: #999999;
                }
            }
        }

        .ipt {
            >div {
                display: flex;
                align-items: center;

                span {
                    color: #999;
                    margin-left: 20px;
                }

                input {
                    width: 220px;
                    height: 40px;
                    border-radius: 4px;
                    border: 1px solid #CCCCCC;
                    outline: none;
                    padding: 0 10px;
                    font-weight: 400;
                    font-size: 18px;
                }
            }
        }
    }

    .btn {
        display: flex;
        justify-content: center;

        >button {
            width: 180px;
            height: 40px;
            background: #1068E6;
            border-radius: 20px;
            font-weight: 400;
            font-size: 18px;
            color: #FFFFFF;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0;
            margin-top: 21px;
        }
    }
}

@media screen and (max-width:768px) {

    .r_main .tabIn {
        height: 40px;
        padding: 0 20px;

        .tab {
            font-size: 15px;
        }

        .btn2 {
            font-size: 12px;
            width: 60px;
            height: 20px;
            line-height: 20px;
        }
    }

    .outer_mob {
        padding: 10px 20px;

        .info {
            border: 1px solid #ccc;
            border-radius: 10px;
            padding: 10px;
            margin-bottom: 10px;

            >div {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                margin-bottom: 5px;

                &:last-child {
                    margin: 0;
                }

                >span {
                    display: inline-block;
                    font-size: 13px;

                    &:first-child {
                        font-size: 14px;
                        font-weight: bold;
                        width: 80px;
                    }
                }
            }

            .btm {
                font-size: 12px;

                >div {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    margin-top: 20px;

                    >div {
                        border: 1px solid #ccc;
                        padding: 5px 10px;
                    }
                }
            }

            ::v-deep .el-button--mini {
                font-size: 12px;
                padding: 5px 10px;
            }

        }
    }
}

@media screen and (max-width:768px) {
    .outer {
        .basic {
            .ipt {
                >div {
                    input {
                        font-size: 14px;
                        height: 25px;
                        line-height: 25px;
                        width: 120px;
                    }
                }
            }

            >div {
                margin-bottom: 15px;
                font-size: 13px;

                >span:first-child {
                    font-size: 14px;
                    width: 100px;
                    flex-shrink: 0;
                }
            }
        }

        .btn {
            margin-top: 30px;

            >button {
                font-size: 14px;
                width: 150px;
                height: 30px;
                line-height: 30px;
            }
        }
    }
}
</style>